<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>波浪登录表单</title>
    <link rel="stylesheet" type="text/css" href="./style.css" />
  </head>
  <body>
    <section class="forms-section">
      <h1 class="section-title">CSS 世界特效</h1>
      <div class="forms">
        <div class="form-wrapper is-active">
          <button type="button" class="switcher switcher-login">
            登 录
            <span class="underline"></span>
          </button>
          <form class="form form-login">
            <fieldset>
              <legend>Please, enter your email and password for login.</legend>
              <div class="input-block">
                <label for="login-email">邮箱</label>
                <input id="login-email" type="email" required />
              </div>
              <div class="input-block">
                <label for="login-password">密码</label>
                <input id="login-password" type="password" required />
              </div>
            </fieldset>
            <button type="submit" class="btn-login">登录</button>
          </form>
        </div>
        <div class="form-wrapper">
          <button type="button" class="switcher switcher-signup">
            注 册
            <span class="underline"></span>
          </button>
          <form class="form form-signup">
            <fieldset>
              <legend>
                Please, enter your email, password and password confirmation for
                sign up.
              </legend>
              <div class="input-block">
                <label for="signup-email">邮箱</label>
                <input id="signup-email" type="email" required />
              </div>
              <div class="input-block">
                <label for="signup-password">密码</label>
                <input id="signup-password" type="password" required />
              </div>
              <div class="input-block">
                <label for="signup-password-confirm">确认邮箱</label>
                <input id="signup-password-confirm" type="password" required />
              </div>
            </fieldset>
            <button type="submit" class="btn-signup">继续</button>
          </form>
        </div>
      </div>
    </section>
  </body>
  <script src="./index.js"></script>
</html>
